import React, { Component } from 'react';
import { Row, Col, Select, DatePicker, Button, Icon } from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
import './index.less';
const { RangePicker } = DatePicker;


const Option = Select.Option;

class LanchRange extends Component {

  constructor(props) {
    super(props);
    const value = props.value || [];
    this.state = {
      lanchRange: value
      // dateRange: value.dateRange,
      // sellNumber: value.sellNumber
    };
  }

  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value;
      this.setState({
        lanchRange: value
      });
    }
  }

  // handleDateRangeChange = (dateRange) => {
  //   if (!('value' in this.props)) {
  //     this.setState({ dateRange });
  //   }
  //   this.triggerChange({ dateRange });
  // }

  // handleSellNumberChange = (sellNumber) => {
  //   if (!('value' in this.props)) {
  //     this.setState({ sellNumber });
  //   }
  //   this.triggerChange({ sellNumber });
  // }

  // triggerChange = (changedValue) => {
  //   // Should provide an event to pass value to Form.
  //   const { onChange } = this.props;
  //   if (onChange) {
  //     onChange(Object.assign({}, this.state, changedValue));
  //   }
  // }

  handleDateRangeChange = (dateRange, index) => {
    const { lanchRange } = this.state;
    let tempLanchRange = lanchRange[index];
    tempLanchRange.dateRange = dateRange;
    lanchRange.splice(index, 1, tempLanchRange);
    if (!('value' in this.props)) {
      this.setState({
        lanchRange
      });
    }
    this.triggerChange(lanchRange);
  }

  handleSellNumberChange = (sellNumber, index) => {
    const { lanchRange } = this.state;
    let tempLanchRange = lanchRange[index];
    tempLanchRange.sellNumber = sellNumber;
    lanchRange.splice(index, 1, tempLanchRange);
    if (!('value' in this.props)) {
      this.setState({
        lanchRange
      });
    }
    console.log(lanchRange);
    this.triggerChange(lanchRange);
  }

  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const { onChange } = this.props;
    if (onChange) {
      onChange(changedValue);
    }
  }

  daysMinus = days => {
    const date = new Date();
    date.setDate(date.getDate() - days);
    return moment(date).format('YYYY-MM-DD');
  }

  disabledDate = (current) => {
    return current && (current < moment(this.daysMinus(0)));
  }

  add = () => {
    const { lanchRange } = this.state;
    const { onChange } = this.props;
    const tempLanchRange = lanchRange.concat({
      sellNumber: 1,
      dateRange: [moment(this.daysMinus(0), 'YYYY-MM-DD'), moment(this.daysMinus(0), 'YYYY-MM-DD')]
    });
    this.setState({
      lanchRange: tempLanchRange
    });
    this.triggerChange(tempLanchRange);
  }

  remove = (index) => {
    const { lanchRange } = this.state;
    let tempLanchRange = lanchRange.filter((item, i) => {
      return i !== index;
    });

    this.setState({
      lanchRange: tempLanchRange
    });
    this.triggerChange(tempLanchRange);
  }

  getLaunchComponent = () => {
    const { lanchRange } = this.state;
    let component = null;
    if (lanchRange) {
      component = lanchRange.map((item, i) => {
        return (
          <Row gutter={16} key={i}>
            <Col span={15}>
            <RangePicker
              {...this.props}
              value={item.dateRange}
              disabledDate={this.disabledDate}
              allowClear={false}
              onChange={(dateRange) => {this.handleDateRangeChange(dateRange, i)}}
            />
            </Col>
            <Col span={5}>
              <Select
                {...this.props}
                value={item.sellNumber}
                onChange={(sellNumber) => {this.handleSellNumberChange(sellNumber, i)}}
              >
                {this.getSellOpts()}
              </Select>
            </Col>
            <Col span={4}>
              {lanchRange.length > 1 ? (
                <Icon
                  className="dynamic-delete-button"
                  type="minus-circle-o"
                  disabled={lanchRange.length === 1}
                  onClick={() => this.remove(i)}
                />
              ) : null}
            </Col>
          </Row>
        );
      });
    }


    return component;
  }

  getSellOpts = () => {
    const components = [];
    for (let i = 0; i < 12; i += 1) {
      components.push(
        <Option key={i + 1} value={i + 1}>
          {i + 1}
        </Option>
      );
    }
    return components;
  }

  render() {
    const { size } = this.props;
    const { sellNumber, dateRange } = this.state;
    return (
      <div>
        {this.getLaunchComponent()}
        <Row>
          <Col span={24}>
            <Button type="dashed" onClick={this.add} style={{ width: '100%' }}>
              <Icon type="plus" /> 新增投放时段
            </Button>
          </Col>
        </Row>
      </div>
    );
  }
}

export default LanchRange;
